<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页组件</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="container">
        <!-- <div class="pager">
            <a href="#">首页</a>
            <a href="">上一页</a>
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#" class="active">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#">6</a>
            <a href="#">下一页</a>
            <a href="#">尾页</a>
            <span>3/10</span> -->
    </div>
    </div>

    <script src="./createPager.js"></script>
    <script>
        var container = document.getElementsByClassName('container')[0];
        /**
         *说明：此函数用于封装一个分页组件
         *使用：只需要把相应的css和当前函数一起使用便可
         * @param {*} page 当前页码
         * @param {*} pageNumer 总页码
         * @param {*} mostNumber 中间区域显示的按钮个数
         * @param {*} container 待插入的父级容器
         */
        createPager(1, 100, 10, container)
    </script>
</body>

</html>